<template>
  <view class="cart-item">
    <view class="item-select">
      <radio color="#c00000" :checked="item.goods_state" @click="updateSelect(item)"></radio>
    </view>
    <view class="item-image">
      <image :src="item.goods_small_logo" mode="aspectFill"></image>
    </view>
    <view class="item-info">
      <view class="info-title">
        {{ item.goods_name }}
      </view>
      <view class="info-content">
        <view class="content-price">
          ￥{{ item.goods_price.toFixed(2) }}
        </view>
        <view class="content-count">
          <button @click="subCount(item)" :disabled="item.goods_count <= 1">-</button>
          <text>{{ item.goods_count }}</text>
          <button @click="addCount(item)">+</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "MyCartItem",
    data() {
      return {

      };
    },
    props: ['item'],
    methods: {
      updateSelect(item) {
        this.$store.dispatch('updateSelect', item)
      },
      addCount(item) {
        this.$store.dispatch('updateCount', {
          item: item,
          count: 1
        })
      },
      subCount(item) {
        this.$store.dispatch('updateCount', {
          item: item,
          count: -1
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cart-item {
    display: flex;
    height: 200rpx;
    background-color: white;
    border-bottom: 1px solid lightgray;

    .item-select {
      display: flex;
      justify-content: center;
      align-items: center;

    }

    .item-image {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200rpx;
      width: 200rpx;

      image {
        width: 200rpx;
        height: 200rpx;
      }
    }

    .item-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10rpx;

      .info-title {
        font-size: 24rpx;
      }

      .info-content {
        display: flex;
        justify-content: space-between;

        .content-price {
          color: #c00000;
        }

        .content-count {
          display: flex;
          border: 1px solid lightgray;

          button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50rpx;
            height: 50rpx;

            &::after {
              border: none;
              border-radius: 0;
            }
          }

          text {
            width: 50rpx;
            height: 50rpx;
            text-align: center;
            line-height: 50rpx;
          }
        }
      }
    }
  }
</style>